atras

Padding y Margin

Padding en un formulario

Padding es una propiedad que separara el contenido de la caja una cierta distancia.

A este formulario con background red le dimos un margin la clase"formulario" que contiene dentro suyo los inputs de clase "formulario_input", sin padding quedaria algo como esto

Al ocupar padding estamos abreviando padding-top, right, buttom, left. cabe destacar que con 4 datos va en el sentido de las manecillas. Tambien lo podemos abreviar ocupando 2 datos, que es el padding vertical y horizontal en ese orden.

Margin

Margin es una propiedad que separara las cajas de otras cajas, pero se superpodra la caja mas grande y no se sumaran las distancias como se podria pensar intuitivamente.

caja de 150x150 con margin 15px
caja de 150x150 con margin 15px
caja de 150x150 con margin 60px

La distancia entre la primera caja y la segunda es 15px para todos los lados, y entre medio a pesar de que se podria pensar que seria la suma, hay una propiedad llamada margin-collapse.
Y la distancia entre la ultima y la primera seran 60px, no la suma que seria 75. Siempre el margin-collapse toma el margen mas grande